<template>
    <view style="height: 100%">
        <!-- marketing/pages/promotion/recruit_plan/recruit_plan.wxml -->

        <view class="recruit_plan">
            <view class="box">
                <view class="box_title flex-row-start">
                    <text>什么是推广员?</text>
                    <image class="bg" src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/bg-1.png"></image>
                </view>
                <view class="explain_wrap">
                    <view class="title">说明</view>
                    <view class="desc">成为推广员，推广新用户注册，升级后可获得推广奖励。等级越高，奖励越多</view>
                </view>

                <view class="explain_wrap">
                    <view class="title">特点</view>
                    <view class="desc">准入门槛低，操作简单。</view>
                </view>
            </view>

            <view class="box">
                <view class="box_title flex-row-start">
                    <text>如何成为推广员？</text>
                    <image class="bg" src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/bg-1.png"></image>
                </view>
                <view class="icon_tab flex-row-between">
                    <block v-for="(item, index) in dots" :key="index">
                        <view class="icon_tab_item flex-column-start">
                            <image class="icon" :src="'https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/' + (index + 1) + '.png'"></image>
                            <view class="title">{{ item.title }}</view>
                            <view class="dot" v-if="index != dots.length - 1"></view>
                        </view>
                    </block>
                </view>
            </view>

            <view class="box" v-if='ruleInfo.length'> 
                <view class="recruit_class" >
                    <view class="recruit_class_item" v-for="(item, index) in ruleInfo" :key="index">
                        <view class="title_wrap flex-row-start">
                            <view class="level">LV{{ item.spreadLevelId }}</view>
                            <view class="title">{{ item.spreadLevelName }}</view>
                        </view>

                        <view class="desc">
                            准入门槛：累计推广
                            <text>{{ item.needSpreadStartNum }}</text>
                            人，即可升级。
                        </view>

                        <view class="card_wrap flex-row-start flex_wrap">
                            <view class="card_item flex-column-evenly" v-if="item.totalCouponMoney">
                                <image class="bg" src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/bg-2.png"></image>
                                <view class="title">￥{{ item.totalCouponMoney }}</view>
                                <view class="btn flex-row-center">
                                    <image class="btn_frame" src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/frame.png"></image>
                                    <view>优惠券</view>
                                </view>
                            </view>
                            <view class="card_item flex-column-evenly" v-if="item.rewardIntegral">
                                <image class="bg" src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/bg-2.png"></image>
                                <view class="title">{{ item.rewardIntegral }}分</view>
                                <view class="btn flex-row-center">
                                    <image class="btn_frame" src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/frame.png"></image>
                                    <view>积分</view>
                                </view>
                            </view>
                            <view class="card_item flex-column-evenly" v-if="item.serveFreeTimes">
                                <image class="bg" src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/bg-2.png"></image>
                                <view class="title">{{ item.serveFreeTimes }}次</view>
                                <view class="btn flex-row-center">
                                    <image class="btn_frame" src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/frame.png"></image>
                                    <view>免服务费次数</view>
                                </view>
                            </view>
                            <view class="card_item flex-column-evenly" v-if="item.rewardAmount">
                                <image class="bg" src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/bg-2.png"></image>
                                <view class="title">{{ item.rewardAmount }}元</view>
                                <view class="btn flex-row-center">
                                    <image class="btn_frame" src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/frame.png"></image>
                                    <view>奖励金</view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="recruit_class_desc" v-if="reduceInfo.isDownLimit === 1">
                        <text>注：</text>
                        {{ reduceInfo.days }}天未推广新用户，则推广等级下降一级。
                    </view>
                </view>
            </view>
        </view>
        <view style="height: 120rpx"></view>

        <view class="btn_wrap flex-row-center">
            <view class="btn flex-row-center" @tap="goPage">
                {{ detailInfo.auditStatus ==0 ? '查看审核详情' : detailInfo.auditStatus === 2 ? '查看原因并重新申请' : '立即申请' }}
            </view>
        </view>

        <!-- 提示 -->
        <view class="tips flex-row-start" v-if="detailInfo.auditStatus === 2">
            <image class="icon" src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/tips1.png"></image>
            <view class="text">您的推广员申请审核不通过，请修改后重新申请</view>
        </view>

        <view class="tips tips_bg1 flex-row-start" v-if="detailInfo.auditStatus ==0">
            <image class="icon" src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/tips2.png"></image>
            <view class="text">您的推广员申请正在审核中，请耐心等待</view>
        </view>
    </view>
</template>

<script lang="ts">
// import zpMixins from '@/uni_modules/zp-mixins/index';
// marketing/pages/promotion/recruit_plan/recruit_plan.ts

// import { getRule, getReduceRule, auditDetail } from '../../../../api/marketing/promotion';
var promotion_1 = require("../../../../api/marketing/promotion");
const { getRule, getReduceRule, auditDetail } = promotion_1
export default {
    data() {
        return {
            dots: [
                {
                    title: '提交申请'
                },
                {
                    title: '审核通过'
                },
                {
                    title: '邀请新用户'
                },
                {
                    title: '获得奖励'
                }
            ],
            ruleInfo: {},
            reduceInfo: {
                isDownLimit: 0
            },
            detailInfo: {auditStatus:200}
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad() {
        this.getRuleDetial();
        this.getReduceRuleDetail();
    },
    onShow() {
        if (uni.getStorageSync('applySuccess')) {
            uni.showToast({
                title: '推广员申请提交成功，请耐心等待审核！',
                icon: 'none',
                duration: 3000
            });
            uni.setStorageSync('applySuccess', '');
        }
        this.getAuditDetail();
    },
    methods: {
        goPage() {
			console.log(this.detailInfo.auditStatus)
            if (this.detailInfo.auditStatus != 200) {
                uni.navigateTo({
                    url: '/marketing_page/pages/promotion/apply/details'
                });
            } else {
                uni.navigateTo({
                    url: '/marketing_page/pages/promotion/apply/apply'
                });
            }
        },

        async getAuditDetail() {
            auditDetail({
                plUserId: uni.getStorageSync('memberId')
            }).then((res) => {
                const { code, data }: any = res;
				console.log(res,data,'这是还说呢么叒')
                // 审核状态：0：待审核；1：审核通过；2：审核拒绝
                if (code == 200) {
                    this.setData({
                        detailInfo: data || {auditStatus:200}
                    });
                }
            });
        },

        async getReduceRuleDetail() {
            const { code, data }: any = await getReduceRule().catch((error) => {});
            if (code === 200) {
                this.setData({
                    reduceInfo: data|| {}
                });
            }
        },

        async getRuleDetial() {
            const { code, data }: any = await getRule().catch((error) => {});
            if (code === 200) {
                const ruleInfo = data.map((item: any) => {
                    if (item.marketCouponOptionApplies?.length > 0) {
                        item.totalCouponMoney = item.marketCouponOptionApplies
                            .map((cItem: any) => cItem.amount * cItem.totalReceiveCount)
                            .reduce((pre: number, cur: number) => Number((pre + cur).toFixed(1)), 0);
                    } else {
                        item.totalCouponMoney = null;
                    }
                    return item;
                });
                this.setData({
                    ruleInfo
                });
            }
        }
    }
}
</script>
<style>
	page {
	    background-color: #eff2f5;
	    position: relative;
		padding-bottom:120rpx;
	}
</style>
<style lang="less" scoped>
/* marketing/pages/promotion/recruit_plan/recruit_plan.wxss */
	@import "../../../../commin/flex.less";

.recruit_plan {
    padding: 16rpx 24rpx 0;
}
.recruit_plan .recruit_class_desc {
    font-size: 20rpx;
    color: #909399;
    margin-top: 40rpx;
}
.recruit_plan .recruit_class_desc text {
    color: #fc724c;
}
.recruit_plan .box {
    background: linear-gradient(0deg, #ffffff, #f4f6f8);
    box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
    border-radius: 16rpx;
    padding: 0 32rpx 40rpx 32rpx;
    margin-bottom: 16rpx;
    border: 2rpx solid #ffffff;
}
.recruit_plan .box_title {
    width: 341rpx;
    height: 90rpx;
    position: relative;
    left: -38rpx;
    top: -10rpx;
}
.recruit_plan .box_title text {
    font-size: 32rpx;
    font-weight: bold;
    color: #ffffff;
    position: absolute;
    z-index: 1;
    margin-left: 38rpx;
}
.recruit_plan .box_title .bg {
    width: 100%;
    height: 100%;
    position: absolute;
}
.recruit_plan .icon_tab {
    margin-top: 34rpx;
}
.recruit_plan .icon_tab .icon_tab_item {
    position: relative;
}
.recruit_plan .icon_tab .icon_tab_item .title {
    font-size: 26rpx;
    font-weight: 500;
    color: #606266;
}
.recruit_plan .icon_tab .icon_tab_item .icon {
    width: 100rpx;
    height: 100rpx;
    margin-bottom: 16rpx;
}
.recruit_plan .icon_tab .icon_tab_item .dot {
    width: 12rpx;
    height: 12rpx;
    background: #fab9a7;
    border-radius: 50%;
    position: absolute;
    top: 33%;
    right: -35rpx;
}
.recruit_plan .icon_tab .icon_tab_item .dot::after {
    position: absolute;
    left: 20rpx;
    width: 9rpx;
    height: 9rpx;
    background: #dadfe3;
    border-radius: 50%;
    content: '';
    top: 50%;
    transform: translateY(-50%);
}
.recruit_plan .icon_tab .icon_tab_item .dot::before {
    position: absolute;
    content: '';
    right: 20rpx;
    width: 9rpx;
    height: 9rpx;
    background: #dadfe3;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}
.recruit_plan .explain_wrap {
    margin-top: 40rpx;
}
.recruit_plan .explain_wrap .title {
    font-size: 30rpx;
    font-weight: bold;
    color: #303133;
    margin-bottom: 23rpx;
}
.recruit_plan .explain_wrap .desc {
    font-size: 24rpx;
    color: #909399;
}
.recruit_plan .recruit_class .recruit_class_item {
    border-bottom: 1rpx dotted #c0c4cc;
    padding-bottom: 20rpx;
}
.recruit_plan .recruit_class .recruit_class_item .title_wrap {
    padding-top: 40rpx;
}
.recruit_plan .recruit_class .recruit_class_item .title_wrap .level {
    font-size: 34rpx;
    font-weight: bold;
    color: #ad6030;
    margin-right: 24rpx;
}
.recruit_plan .recruit_class .recruit_class_item .title_wrap .title {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ad6030;
}
.recruit_plan .recruit_class .recruit_class_item .desc {
    font-size: 20rpx;
    font-weight: 500;
    color: #909399;
    line-height: 36px;
    margin-bottom: 10rpx;
}
.recruit_plan .recruit_class .recruit_class_item .desc text {
    color: #fc724c;
}
.recruit_plan .recruit_class .recruit_class_item .card_item {
    position: relative;
    width: 202rpx;
    height: 192rpx;
    z-index: 1;
    margin-right: 15rpx;
    margin-bottom: 24rpx;
}
.recruit_plan .recruit_class .recruit_class_item .card_item:nth-child(3) {
    margin-right: 0;
}
.recruit_plan .recruit_class .recruit_class_item .card_item .bg {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
}
.recruit_plan .recruit_class .recruit_class_item .card_item .title {
    font-size: 30rpx;
    font-weight: bold;
    color: #fc724c;
    line-height: 40rpx;
}
.recruit_plan .recruit_class .recruit_class_item .card_item .btn {
    position: relative;
    width: 182rpx;
    height: 65rpx;
    font-size: 22rpx;
    font-weight: 500;
    color: #a14b20;
}
.recruit_plan .recruit_class .recruit_class_item .card_item .btn .btn_frame {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}
.btn_wrap {
    width: 100%;
    height: 120rpx;
    background: #ffffff;
    margin-top: 40rpx;
	position: fixed;
	bottom: 0;
	left: 0;
    z-index: 9;
}
.btn_wrap .btn {
    width: 686rpx;
    height: 88rpx;
    background: linear-gradient(105deg, #268ae8, #1487fa);
    box-shadow: 0px 3rpx 6rpx 0rpx rgba(0, 110, 212, 0.3);
    border-radius: 44rpx;
    font-size: 30rpx;
    font-weight: bold;
    color: #ffffff;
}
.tips {
    padding: 0 42rpx;
    position: fixed;
    top: var(--window-top);
    width: 100%;
    z-index: 3;
    background: rgba(144, 147, 153, 0.9);
    height: 80rpx;
}
.tips .icon {
    width: 32rpx;
    height: 32rpx;
    margin-right: 27rpx;
}
.tips .text {
    font-size: 28rpx;
    color: #ffffff;
}
.tips_bg1 {
    background: #f7a14a;
	background: rgba(247, 161, 73, 0.8);
}
</style>
